.explain{
    margin-top: 10px;
}
.flexdirection{
    display: none!important;
}
@mixin box($itemSize: 50px) {
    color: red;
    width: 700px;
    padding: 20px 20px;
    box-sizing: border-box;
    border: 1px solid black;
    .item{
        height: $itemSize;
        width: $itemSize;
        line-height: $itemSize;
        text-align: center;
        background-color: aqua;
        box-sizing: border-box;
        border: 1px solid yellow;
    }
}
.box1{
    display: flex;
    flex-direction: row;
    @include box;
}
.box2{
    display: flex;
    flex-direction: row-reverse;
    @include box;
}
.box3{
    display: flex;
    flex-direction: column;
    @include box;
}
.box4{
    display: flex;
    flex-direction: column-reverse;
    @include box;
}
.box5{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    @include box(100px);
}
.box6{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    @include box(100px);
}
.box7{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    @include box(100px);
}
.box8{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    @include box(100px);
}
.box9{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    @include box(100px);
}
.box10{
    display: flex;
    flex-direction: row;
    justify-content: center;
    @include box(100px);
}
.box11{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    @include box(100px);
}
.box12{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    @include box(100px);
}

.box13{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    height: 300px;
    @include box(100px);
}
.box14{
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    flex-wrap: wrap;
    height: 300px;
    @include box(100px);
}
.box15{
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    height: 300px;
    @include box(100px);
}
.box16{
    display: flex;
    flex-direction: row;
    align-content: space-between;
    flex-wrap: wrap;
    height: 300px;
    @include box(100px);
}
.box17{
    display: flex;
    flex-direction: row;
    align-content: space-around;
    flex-wrap: wrap;
    height: 300px;
    @include box(100px);
}
.box18{
    display: flex;
    flex-direction: row;
    align-content: stretch;
    flex-wrap: wrap;
    height: 300px;
    @include box(100px);
}
.box19{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 300px;
    @include box(100px);
}
.box20{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100px;
    align-items: flex-start;
    @include box(100px);
}
.box21{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100px;
    align-items: flex-end;
    @include box(100px);
}
.box22{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100px;
    align-items: center;
    @include box(100px);
}
.box23{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100px;
    align-items: baseline;
    @include box(100px);
}
.box24{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100px;
    align-items: stretch;
    @include box(100px);
}
